<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="public/js/jquery.min.js"></script>
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/animate.min.css">
    <link rel="stylesheet" href="public/css/hb_wap.css">
    <title>砸蛋</title>
</head>
<style>
    html{font-size: 62.5%;}

    .new_egg{
        padding:0 12px;
    }
    .break_egg{
        padding:0
    }
    .break_egg img{
        padding-top: 22%;;
    }
</style>
<body>


<div class="margin_center max_width_750px activeContainer" style="background-color: #2bbf79;">
    <div class="text-center bg_4996f6 color_fff" id="top">
        <span class="font_18 line_height_40px">活动详情</span>
    </div>
    <div>
        <img src="public/image/active_index_02.png" class="img_responsive">
        <img src="public/image/active_index_03.png" class="img_responsive">
        <div class="relative">
            <img src="public/image/active_index_04.png" class="img_responsive">
            <div class="absolute all_width color_fff" style="top:0;left: 0">
                <div class="margin_center text-center" style="width: 66%;margin-top: 2%;">
                    您有3次机会，选个金蛋试试手气
                </div>
            </div>
        </div>

        <div class="relative">
            <img src="public/image/active_index_05.png" class="img_responsive">
            <div class="absolute all_width" style="left: 0;top: 10%;">
                <div class="margin_center width_80">
                    <div class="float_left width_33 new_egg">
                        <img src="public/image/new_egg.png" class="img_responsive" onclick="selectEgg(this)">
                    </div>
                    <div class="float_left width_34 new_egg">
                        <img src="public/image/new_egg.png" class="img_responsive" onclick="selectEgg(this)">
                    </div>
                    <div class="float_left width_33 new_egg">
                        <img src="public/image/new_egg.png" class="img_responsive" onclick="selectEgg(this)">
                    </div>
                </div>
            </div>
        </div>

        <div class="relative">
            <img src="public/image/active_index_06.png" class="img_responsive">
            <div class="absolute all_width" style="left: 0;top: 20%;">
                <div class="margin_center width_80">
                    <div class="float_left width_33 break_egg">
                        <img src="public/image/break_egg.png" class="img_responsive">
                    </div>
                    <div class="float_left width_34 new_egg">
                        <img src="public/image/new_egg.png" class="img_responsive" onclick="selectEgg(this)">
                    </div>
                    <div class="float_left width_33 new_egg">
                        <img src="public/image/new_egg.png" class="img_responsive" onclick="selectEgg(this)">
                    </div>
                </div>
            </div>
        </div>

        <img src="public/image/active_index_07.png" class="img_responsive">
        <div class="relative">
            <img src="public/image/active_index_08.png" class="img_responsive">
            <div class="absolute all_width text-center" style="left: 0;top: -7%;">
                <div style="color:#0e6b3f;">
                    您尚未登录，点击登录
                </div>
            </div>
        </div>


        <div class="relative">
            <img src="public/image/active_index_10.png" class="img_responsive">
            <div class="absolute all_width all_height color_fff overflow_hidden line_height_30px" style="top:0;left: 0">
                <div class="width_70 margin_center all_height text-center" style="margin-top: 4%;">
                    <table class="all_width">
                        <tr style="color: #fced3b;background-color: #178752;">
                            <td width="120" align="center">获奖用户</td>
                            <td width="130" align="center">奖品展示</td>
                        </tr>
                    </table>
                    <div id="demo" style="overflow: hidden; height: 80%;">
                        <div id="demo1">
                            <table class="all_width" style="border: 1px solid #fff;">
                                <tr style="border-bottom: 1px solid #fff;">
                                    <td width="100" style="border-right: 1px solid #fff;">182****6770</td>
                                    <td width="100" align="center">在办</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #fff;">
                                    <td width="100" style="border-right: 1px solid #fff;">2014-03-13</td>
                                    <td width="100" align="center">在办</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #fff;">
                                    <td width="100" style="border-right: 1px solid #fff;">182****6770</td>
                                    <td width="100" align="center">在办</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #fff;">
                                    <td width="100" style="border-right: 1px solid #fff;">2014-03-13</td>
                                    <td width="100" align="center">在办</td>
                                </tr>
                            </table>
                        </div>
                        <div id="demo2"></div>
                    </div>
                </div>
            </div>
        </div>
        <img src="public/image/active_index_11.png" class="img_responsive">
        <img src="public/image/active_index_12.png" class="img_responsive">
        <img src="public/image/active_index_13.png" class="img_responsive">

    </div>
</div>

<div id="bombBackgroundContainer" class="display_none">
    <div class="absolute all_width all_height" style="background-color: rgba(0,0,0,0.6);top: 0;left: 0;z-index: 77">
    </div>

    <div class="fixed all_width relative" style="bottom: 0px;left: 0;z-index: 88">
        <img src="public/image/egg_index/bg_bottom_02.png" class="img_responsive">

        <div class="absolute all_width step_1" style="left: 0;top: -58%">
            <img src="public/image/new_egg_04.png" class="img_responsive" onclick="bombEggAction(this,1)">
            <div class="absolute width_33" style="top:-7%;right: 7%;transform:rotate(-15deg);" id="hammerContainer">
                <img src="public/image/hammer_03.png" class="img_responsive">
            </div>
        </div>

        <div class="absolute all_width step_2 display_none" style="left: 0;top: -60%">
            <img src="public/image/break_egg_021.png" class="img_responsive">
            <div class="absolute width_33" style="top:-7%;right: 7%;transform:rotate(-5deg);" id="hammerContainer2">
                <img src="public/image/hammer_03.png" class="img_responsive" >
            </div>
        </div>

        <div class="absolute all_width step_3 display_none" style="left: 0;top: -94%">
            <img src="public/image/cupon_egg_02.png" class="img_responsive">
            <div class="absolute all_width" style="top:15%;left: 0;">
                <div class="width_40 margin_center" onclick="goOn()">
                    <div class=" text-center" style="color: #c60f1a;">
                        <span class="font_16">￥</span>
                        <span class="font_23">100</span>
                    </div>
                    <div class="font_12" style="line-height: 1.2;text-align: center;color: #c60f1a;">
                        单笔投资金额≥10000元 限3个月以上定期产品
                    </div>
                </div>
            </div>
            <div class="absolute all_width" style="top:35%;left: 0;">
                <div class="width_50 margin_center" onclick="goOn()">
                    &nbsp;
                </div>
            </div>
        </div>

    </div>
</div>

</body>

<script type="text/javascript">
    //选择砸的蛋
    function selectEgg(obj){
        var currentObj = $(obj);
        var parentObj = currentObj.closest("div.new_egg");
        parentObj.removeClass("new_egg").addClass("break_egg").html('<img src="public/image/break_egg.png" class="img_responsive">');

        showEgg();
        setTimeout(hammerAction,100);
        setTimeout(step1,1100);
        setTimeout(hiddeHammer,1600);
        //setTimeout(step2,3100);
    }

    //砸蛋，让蛋变碎
    function step1(){
        bombEggAction("",1);
    }

    //从蛋中显示代金券
    function step2(){
        bombEggAction("",2);
    }

    //隐藏锤子
    function hiddeHammer(){
        $("#hammerContainer2").fadeOut("slow",step2);
    }

    //锤子砸蛋
    function hammerAction(){
        $('#hammerContainer').addClass('animated rotateInDownRight');
    }


    $(function(){
        moveFont();
    });

    //显示砸蛋的控件
    function showEgg(){
        window.location.href = "/huangbiao/bomb_egg/index1.html#top";
        $("#bombBackgroundContainer").removeClass("display_none");
        $("body").css("overflow","hidden");
    }

    function bombEggAction(obj,step){
        if(step == 1){
            $(".step_1").addClass("display_none");
            $(".step_2").removeClass("display_none");
        }

        if(step == 2){
            $(".step_2").addClass("display_none");
            $(".step_3").removeClass("display_none");
        }
    }

    function goOn(){
        $(".step_3").addClass("display_none");
        $(".step_2").addClass("display_none");
        $(".step_1").removeClass("display_none");
        $("#hammerContainer2").fadeIn("fast");
        $("#bombBackgroundContainer").addClass("display_none");
        $("body").css("overflow","auto");
    }

    //文字滚动
    function moveFont(){
        var speed = 50;
        demo2.innerHTML = demo1.innerHTML;
        function Marquee() {
            if (demo1.offsetTop -  demo.scrollTop <= 0) {
                demo.scrollTop = 0;
            } else {
                demo.scrollTop++;
            }
        }
        var MyMar = setInterval(Marquee, speed);

        demo.onmouseover = function() {
            clearInterval(MyMar);
        };

        demo.onmouseout = function() {
            MyMar = setInterval(Marquee, speed);
        };
    }



</script>
</html>
